'use strict'
import React, { Component, PropTypes } from 'react'
import $ from 'jquery'

class ExchangeRecord extends  Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            data: null,
            bodyBgClr: '#fff'
        };
    }
    componentDidMount() {
        $('body').css('backgroundColor', '#fff');
    }
    render() {
        return (<div>
            <ul className="nav nav-tabs" role="tablist">
                <li role="presentation" className="active"><a href="#virtual" aria-controls="home" role="tab" data-toggle="tab">虚拟</a></li>
                <li role="presentation"><a href="#entity" aria-controls="profile" role="tab" data-toggle="tab">实物</a></li>
            </ul>
            <div className="tab-content">
                <div role="tabpanel" className="tab-pane active" id="virtual">
                    <ul className="list exchange-list">
                        <li className="exchange-item">
                            <div className="example-avatar-wrapper">
                                <div className="example-avatar"></div>
                                <div className="avatar-widget witch-hat"></div>
                            </div>
                            <div className="exchange-meta">
                                <h3 className="exchange-title">文青系头像挂件</h3>
                                <div className="need-points">4000</div>
                                <div className="date">2016-11-03</div>
                            </div>
                            <div className="exchange-actions">
                                <button className="btn btn-blue">已使用</button>
                            </div>
                        </li>
                        <li className="exchange-item">
                            <div className="example-avatar-wrapper">
                                <div className="example-avatar"></div>
                                <div className="avatar-widget big-mouth-01"></div>
                            </div>
                            <div className="exchange-meta">
                                <h3 className="exchange-title">文青系头像挂件</h3>
                                <div className="need-points">4000</div>
                                <div className="date">2016-11-03</div>
                            </div>
                            <div className="exchange-actions">
                                <button className="btn btn-blue-border">已使用</button>
                            </div>
                        </li>
                        <li className="exchange-item">
                            <div className="example-avatar-wrapper">
                                <div className="example-avatar"></div>
                                <div className="avatar-widget big-mouth-02"></div>
                            </div>
                            <div className="exchange-meta">
                                <h3 className="exchange-title">文青系头像挂件</h3>
                                <div className="need-points">4000</div>
                                <div className="date">2016-11-03</div>
                            </div>
                            <div className="exchange-actions">
                                <button className="btn btn-blue-border">已使用</button>
                            </div>
                        </li>
                    </ul>
                </div>
                <div role="tabpanel" className="tab-pane" id="entity">
                    <ul className="list exchange-list">
                        <li className="exchange-item">
                            <div className="good-image">
                                <img src="images/mall/good-1.jpg" />
                            </div>
                            <div className="exchange-meta">
                                <h3 className="exchange-title">文青系头像挂件</h3>
                                <div className="need-points">4000</div>
                                <div className="date">2016-11-03</div>
                            </div>
                        </li>
                        <li className="exchange-item">
                            <div className="good-image">
                                <img src="images/mall/good-1.jpg" />
                            </div>
                            <div className="exchange-meta">
                                <h3 className="exchange-title">文青系头像挂件</h3>
                                <div className="need-points">4000</div>
                                <div className="date">2016-11-03</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>)
    }
}

export default ExchangeRecord;